<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <div class="test-wrap">
      <div class="test-title">问题</div>
      <el-input
        v-model="question"
        class="text-content"
        placeholder="请输入问题"
      />
      <el-button plain type="primary" style="margin-left: 16px;" @click="submitForm">测试</el-button>
    </div>
    <div class="error-tips" v-if="showTips">
      问题不能为空
    </div>
    <div class="test-wrap">
      <div class="test-title">答案</div>
      <el-input
        v-model="answer"
        class="text-content"
        :rows="5"
        type="textarea"
        placeholder="测试结果"
      />
    </div>
  </Dialog>
</template>
<script setup lang="ts">
import { LargeModelApi } from '@/api/multiModel/largemodel'
/** 测试模型 弹窗 */
defineOptions({ name: 'TestModelDialog' })

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = '模型测试' // 弹窗的标题

const question = ref('')
const answer = ref('')
const modelId = ref()
const largeModelPlatform = ref('')

/** 打开弹窗 */
const open = async (id: number, platform:string) => {
  dialogVisible.value = true
  modelId.value = id
  largeModelPlatform.value = platform
  question.value = ''
  answer.value = ''
  showTips.value = false
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const showTips = ref(false)
const submitForm = async () => {
  // 校验表单
  if (!question.value.trim()) {
    showTips.value = true
    return
  }
  // 提交请求
  try {
    const params = {
      id: modelId.value,
      largeModelPlatform: largeModelPlatform.value,
      question: question.value
    }
    const data = await LargeModelApi.testLargeModel(params)
    answer.value = data
  } catch {

  }
}
</script>
<style lang="scss" scoped>
.test-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  &:last-child {
    margin-bottom: 30px;
    margin-top: 16px;
  }
  .test-title {
    width: 60px;
    font-size: 14px
  }
  .text-content{
    flex: 1;
  }
}
.error-tips {
  padding-left: 60px;
  margin-top: 6px;
  line-height: 26px;
  color: var(--el-color-danger);
}
</style>